<template>
    <div class="upload">
        <el-upload v-model:file-list="fileLists.value" class="upload-demo" :on-remove="handleRemove"
            action="/reception/upload" multiple :limit="20">
            <el-button type="primary">Click to upload</el-button>
        </el-upload>
    </div>
</template>

<script setup lang="ts">
import { fileList, delFile } from "../../api/api";
import { reactive, ref } from "vue";
let fileLists: any = reactive({ value: [] });
const getlist = () => {
    fileList().then((res) => {
        fileLists.value = []
        res.data.forEach((item: any) => {
            fileLists.value.push({ name: item.filename, url: item.url, id: item.id })
        });
        console.log(fileLists.value)
    })
}
getlist()


const handleRemove = (item: any) => {
    delFile({ file_id: item.id })
    // getlist()
}



</script>

<style>
.upload {
    width: 800px;
    margin: 0 auto;
}
</style>